import classNames from 'classnames'

import { Icon } from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useState } from 'react'
import { Channel } from '@/types/data'
import { changeChannels, delMyChannels, addChannels } from '@/store/actions'

type Props = {
  onClose: () => void
}

const Channels = ({ onClose }: Props) => {
  // 是否为编辑状态
  const [isEdit, setIsEdit] = useState(false)
  const dispatch = useDispatch()
  const { channels, activeId, restChannels } = useSelector(
    (state: RootState) => state.home
  )

  // 切换编辑状态
  const changeEdit = () => {
    setIsEdit(!isEdit)
  }

  // 切换频道
  const onChannelClick = (channel: Channel) => {
    if (!isEdit) {
      // 不是编辑状态，就执行切换频道操作
      dispatch(changeChannels(channel.id))
      // 关闭弹窗层
      onClose()
    } else {
      // 是编辑状态，执行删除频道操作
      // console.log('删除频道')

      // 判断是否为推荐频道 或 长度小于等于4
      if (channel.id === 0) return
      // 如果是当前选中项也不允许删除
      if (channel.id === activeId) return
      if (channels.length <= 4) return

      // 执行删除频道的操作
      dispatch(delMyChannels(channel))
    }
  }

  // 添加我的频道
  const onAddChannels = (channel: Channel) => {
    dispatch(addChannels(channel))
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classNames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-edit" onClick={changeEdit}>
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {channels.map((item) => (
              <span
                key={item.id}
                className={classNames(
                  'channel-list-item',
                  activeId === item.id && 'selected'
                )}
                onClick={() => onChannelClick(item)}
              >
                {item.name}
                {/* id不为首元素以及当前元素显示删除图标 */}
                {/* 排除 推荐 以及 当前选中项的 删除的图标 */}
                {item.id !== 0 && item.id !== activeId && (
                  <Icon type="iconbtn_tag_close" />
                )}
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">可选频道</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {restChannels.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => onAddChannels(item)}
              >
                +{item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
